class HelloWorld extends HTMLElement {
  constructor() {
    super();

    // 创建一个shadow root
      // 是一个 DOM 子树的根节点, 它与文档的主 DOM 树分开渲染
      //mode: open|closed; 定义shadow root的内部实现是否可被JavaScript访问及修改
    const shadowRoot = this.attachShadow({ mode: 'open' });
    // 插入html
    shadowRoot.innerHTML = this.template();
  }

  // 模板
  template() {
    return `
      <style>
        h1 {
          color: red;
        }
      </style>

      <h1>我是一个模板组件</h1>
    `
  }

  // 生命周期:首次被插入文栏DOM时
  connectedCallback() {
    console.log('首次插入');
  }

  // 生命周期:从文档DOM中删除时
  disconnectedCallback() {
    console.log('删除');
  }

  // 生命周期:被移动到新的文档时
  adoptedCallback() {
    console.log('新的文档');
  }

  // 生命周期:监听属性变化
  attributeChangedCallback() {
   console.log('属性变化');
  }
}

// 定义了一个自定义元素
  // customElements.define(name, constructor, options);
  // options-> 指定继承的已创建的元素, 被用于创建自定义元素
    // customElements.define('word-count', WordCount, { extends: 'p' });
    // <p is="word-count"></p>
customElements.define('hello-world', HelloWorld);

// https://blog.csdn.net/weixin_44178305/article/details/110357289